<template>
  <div
    :style="{
      width: verticalTheme.headerRight + 'px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
    }"
    class="container"
  >
    <n-button
      @click="handlerChangeTheme('dark')"
      circle
      quaternary
      v-if="commonVar.theme === 'light'"
    >
      <template #icon>
        <n-icon><WeatherMoon16Filled /></n-icon>
      </template>
    </n-button>
    <n-button @click="handlerChangeTheme('light')" circle quaternary v-else>
      <template #icon>
        <n-icon><WeatherSunny20Filled /></n-icon>
      </template>
    </n-button>
    <n-button circle quaternary>
      <template #icon>
        <n-dropdown
          trigger="click"
          :options="localOptions"
          @select="handleChangeLocale"
        >
          <n-icon><Translate20Regular /></n-icon>
        </n-dropdown>
      </template>
    </n-button>
    <n-button circle quaternary @click="doRefresh">
      <template #icon>
        <n-icon><ArrowClockwise16Regular /></n-icon>
      </template>
    </n-button>
    <n-button circle quaternary @click="changeScreen" v-if="!isFull">
      <template #icon>
        <n-icon><ArrowExpand20Regular /></n-icon>
      </template>
    </n-button>
    <n-button circle quaternary @click="changeScreen" v-else>
      <template #icon>
        <n-icon><ArrowMoveInward20Regular /></n-icon>
      </template>
    </n-button>
    <n-badge dot processing :offset="offset">
      <n-button circle quaternary>
        <template #icon>
          <n-icon><Alert16Regular /></n-icon>
        </template>
      </n-button>
    </n-badge>
    <div style="margin-left: 20px; cursor: pointer">
      <n-dropdown
        trigger="click"
        placement="bottom-end"
        :options="options"
        @select="handleSelect"
      >
        <n-avatar
          round
          size="small"
          src="https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG"
        />
      </n-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, h } from "vue";
import {
  Alert16Regular,
  ArrowClockwise16Regular,
  ArrowExpand20Regular,
  WeatherMoon16Filled,
  Translate20Regular,
  WeatherSunny20Filled,
  ArrowMoveInward20Regular,
} from "@vicons/fluent";
import { LogOutOutline as LogoutIcon } from "@vicons/ionicons5";

import screenfull from "screenfull";
import { useThemeStore } from "@/stores/models/theme";
import { useRefreshStore } from "@/stores/models/refresh";
import { NAvatar, NText, useMessage, dateZhCN, zhCN, NIcon } from "naive-ui";

const message = useMessage();
const themeStore = useThemeStore();
const useRefresh = useRefreshStore();
const commonVar = themeStore.commonVar;
const verticalTheme = themeStore.verticalTheme;
function renderCustomHeader() {
  return h(
    "div",
    {
      style: "display: flex; align-items: center; padding: 8px 12px;",
    },
    [
      h(NAvatar, {
        round: true,
        style: "margin-right: 12px;",
        src: "https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG",
      }),
      h("div", null, [
        h("div", null, [h(NText, { depth: 2 }, { default: () => "打工仔" })]),
        h("div", { style: "font-size: 12px;" }, [
          h(
            NText,
            { depth: 3 },
            { default: () => "毫无疑问，你是办公室里最亮的星" }
          ),
        ]),
      ]),
    ]
  );
}
const renderIcon = (icon) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};
const options = [
  {
    key: "header",
    type: "render",
    render: renderCustomHeader,
  },
  {
    key: "header-divider",
    type: "divider",
  },
  {
    label: "处理群消息 342 条",
    key: "stmt1",
  },
  {
    label: "被 @ 58 次",
    key: "stmt2",
  },
  {
    label: "加入群 17 个",
    key: "stmt3",
  },
  {
    type: "divider",
    key: "d1",
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(LogoutIcon),
  },
];
const localOptions = [
  {
    label: "简体中文",
    key: "cn",
  },
  {
    label: "English",
    key: "en",
  },
];
//全屏
const isFull = ref(false);
const offset = [-6, 6];
onMounted(() => {});

//修改主题
const handlerChangeTheme = (theme) => {
  commonVar.theme = theme;
};

//修改语言
const handleChangeLocale = (key) => {
  if (key === "en") {
    commonVar.locale = null;
    commonVar.dateLocale = null;
  } else {
    commonVar.locale = zhCN;
    commonVar.dateLocale = dateZhCN;
  }
};
//刷新标志进行本地存储
const doRefresh = () => {
  useRefresh.refresh = !useRefresh.refresh;
};
const changeScreen = () => {
  if (screenfull.isEnabled) {
    //可以来回切换全屏/非全屏
    isFull.value = !isFull.value;
    screenfull.toggle();
  } else {
    message.warning("您的浏览器不支持全屏！");
  }
};
</script>
<style scoped lang='scss'>
.container button {
  margin-left: 16px;
}

.n-icon {
  opacity: 0.8;
}

.n-icon:hover {
  opacity: 1;
}
</style>